<template>
  <!-- 公司级标准成本科目管理 -->
  <base-breadcrumb>
    <a-card>
      <div class="btn_box page-btn-right-top">
        <a-button :loading="loading2" type="primary" class="button_right" @click="handleSubmit" v-btnPermission="'bm_046_sub_03'">提交</a-button>
      </div>
      <a-spin :spinning="loading1">
        <a-row :gutter="24" class="accountManagement">
          <a-col :md="4" :sm="4" class="col-center">
            <title-name title="项目业态"></title-name>
            <a-radio-group style="width: 100%" v-model="activeKey" button-style="solid" defaultValue="1">
              <a-radio-button :value="item.type" v-for="(item, index) in tabTypeData" :key="index" style="width: 100%; text-align: center; margin-bottom: 20px" @click="tabTopChange(item.type)">
                <Ellipsis tooltip :length="16" style="word-break: break-all">{{ item.label }}</Ellipsis>
              </a-radio-button>
            </a-radio-group>
          </a-col>
          <a-col :md="19" :sm="19" class="col-left" :offset="5">
            <div class="accout-btn" style="margin-bottom: 10px">
              <a-button type="primary" @click="handleUpdate('add')" :disabled="disabledBtn" v-btnPermission="'bm_046_add_01'">新增二级科目</a-button>
              <a-button @click="delSubject('add')" style="margin: 0 20px" :disabled="!disabledDel" v-btnPermission="'bm_046_del_02'">删除科目</a-button>
              <a-input-search style="margin-bottom: 8px" placeholder="搜索" @search="onSearch" />
            </div>
            <a-table row-key="id" style="width: 100%" :data-source="gData" :columns="columns" bordered :customRow="customRow" :rowClassName="rowClassName" :pagination="false"> </a-table>
          </a-col>
        </a-row>
      </a-spin>
    </a-card>
    <AddAccount :visible.sync="visible" @ok="addData" :selectRow="selectRow"></AddAccount>
  </base-breadcrumb>
</template>

<script>
import { mapGetters } from 'vuex'
import AddAccount from './addAccount'
import { submit, queryTreeListByType, deleteByPrimaryKey } from '@/api/businessAffairs/accountManagement.js'
import Ellipsis from '@/components/Ellipsis'
const columns = [
  {
    title: '序号',
    width: '160px',
    customRender(text, record, index) {
      return record.number
    }
  },
  {
    title: '项目名称',
    dataIndex: 'name'
  },
  {
    title: '成本科目编码',
    dataIndex: 'code'
  }
]
export default {
  name: 'accountManagement' + Date.now(),
  data() {
    this.columns = columns
    return {
      loading1: false,
      loading2: false,
      tabTypeData: [
        { type: '1', label: '土建' },
        { type: '2', label: '安装' },
        { type: '3', label: '基础设施' },
        { type: '4', label: '水利水电与水务环保' },
        { type: '5', label: '装饰与城市更新' }
      ],
      selectedKeys: [],
      expandedKeys: [],
      autoExpandParent: true,
      visible: false,
      form: {},
      searchValue: '',
      gData: [],
      dataList: [],
      activeKey: '1',
      selectedRowKeys: [],
      selectRow: { id: null },
      rowClassName: (r) => {
        return r.id === this.selectRow.id ? 'select' : ''
      },
      customRow: (record) => {
        return {
          on: {
            // 事件
            click: (event) => {
              this.onExpand(record)
            }
          }
        }
      }
    }
  },
  components: {
    AddAccount,
    Ellipsis
  },
  computed: {
    ...mapGetters(['GET_REDRESS_PERCENTAGE']),
    tableRowSelection() {
      const { selectedRowKeys } = this
      const type = 'radio'
      return {
        type: type,
        selectedRowKeys: selectedRowKeys,
        onChange: this.onSelectChange,
        hideDefaultSelections: true,
        getCheckboxProps: (record) => ({
          props: {
            disabled: record.parentId ? true : false
          }
        })
      }
    },
    disabledBtn() {
      const { selectRow } = this
      // 选中，并且为第一级节点
      let flag = selectRow.id && !selectRow.parentId ? false : true
      return flag
    },
    disabledDel() {
      const { selectRow } = this
      let flag = false
      if (Reflect.has(selectRow, 'isEnabled')) {
        //0：可删除，1：不可删除
        if (selectRow.isEnabled * 1 === 1) {
          flag = false
          console.log(1)
        } else {
          console.log(2)
          flag = true
        }
      } else {
        flag = false
      }
      return flag
    }
  },
  methods: {
    tabTopChange(activeKey) {
      this.getData(activeKey)
    },
    onSearch(search) {
      this.getData(this.activeKey, search)
    },
    //点击选中行
    onExpand(record) {
      if (this.selectRow.id === record.id) {
        this.selectRow = {}
      } else {
        this.selectRow = record
      }
    },
    //添加序号
    setNumber(data, parentNumber) {
      let chineseNum = ["一", "二", "三", "四", "五", "六", "七", "八", "九"];
      if (data && data.length) {
        data.forEach((item, index) => {
          let _index = parentNumber ? `${parentNumber}.${index + 1}` : index + 1
          item.number = item.parentId?_index:chineseNum[index];
          if (item.children && item.children.length) {
            this.setNumber(item.children, _index)
          } else {
            item.children = null
          }
        })
      }
      return data
    },
    handleUpdate() {
      this.visible = true
    },
    //删除
    delSubject() {
      this.$confirm({
        title: '确定是否删除?',
        content: '删除该内容后，将不可找回',
        onOk: () => {
          this.loading = true
          deleteByPrimaryKey(this.selectRow.id).then((res) => {
            this.loading = false
            if (res.code == '0') {
              this.$message.success('删除成功')
              this.getData(this.activeKey)
            }
          })
        }
      })
    },
    generateList(data) {
      for (let i = 0; i < data.length; i++) {
        const node = data[i]
        node.scopedSlots = { title: 'title' }
        this.dataList.push(node)
        if (node.children && node.children.length > 0) {
          this.generateList(node.children)
        }
      }
    },
    addData() {
      this.visible = false
      this.getData(this.activeKey)
    },
    handleSubmit() {
      this.$confirm({
        title: '确定是否提交?',
        content: '提交后本次新增成本科目将不可进行删除，确定是否提交',
        onOk: () => {
          this.loading2 = true
          submit(this.activeKey).then((res) => {
            if (res.code == '0') {
              this.$message.success('提交成功')
              this.loading2 = false
              this.getData(this.activeKey)
            }
          })
        }
      })
    },
    getData(type, search) {
      this.dataList = []
      this.loading1 = true
      queryTreeListByType(type, search).then((res) => {
        if (res.code == '0') {
          this.selectRow = {}
          this.gData = this.setNumber(res.data)
          this.loading1 = false
        }
      })
    },
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRows = selectedRows
      this.selectedRowKeys = selectedRowKeys
    }
  },
  mounted() {
    this.getData(this.activeKey)
  }
}
</script>

<style lang="less" scoped>
@deep: ~'>>>';
.accout-btn {
  position: fixed;
  width: 400px;
  display: flex;
  z-index: 100;
  top:180px;
}
.accountManagement {
  min-height: 400px;
  @{deep} .select {
    background: rgb(230, 247, 255);

    &:hover {
      background: rgb(230, 247, 255);
    }
  }
  .col-center{
    position: fixed;
  }
  @{deep} .ant-table{
    margin-top: 50px;
  }
}
</style>